<template>
  <div>
      <div class="model">
          <div class="model-title">
              <h2>生产企业分布</h2>
          </div>
          <div class="model-echart">
            <div id="companyDistributeBar"></div>
            <div id="companyDistributePie"></div>
          </div>
      </div>
  </div>
</template>
<script>
import { getEnterpriseCount } from '@/api/park.js'
export default {
    data() {
        return {
            form: {
                year: ''
            },
            echartData: {
                x: [],
                y: []
            },
            pieEchartData: {
                x: [],
                y: []
            },
            companyDistributePieChart: '',
            companyDistributeBarChart: ''
        }
    },
    methods: {
        async getEnterprisePieCount(form) {
            if (form.year === '') return
            const res = await getEnterpriseCount({
                year: form.year,
                parkName: this.$store.getters.parkName
            })
            let x = [], y = []
            res.map(e => {
                x.push({
                    'name': e.type,
                    'value': e.counts,
                    'percent': e.percent
                })
                y.push(e.type)
            })
            this.pieEchartData.x = x
            this.pieEchartData.y = y
            if (this.companyDistributePieChart !== '') {
                let obj = {
                    xAxisData: this.pieEchartData.y,
                    seriesData: this.pieEchartData.x
                }
                this.companyDistributePieChart.clear()
                this.companyDistributePieChart.setOption(this.$lib.pieChart(obj, 2))
                this.companyDistributePieChart.resize()
            } else {
                this.initPieChart()
            }
        },
        async getEnterpriseBarCount(form) {
            if (form.year === '') return
            const res = await getEnterpriseCount({
                year: form.year,
                parkName: this.$store.getters.parkName
            })
            let x = [], y = []
            res.map((e, index) => {
                x.push({
                    'name': e.type,
                    'value': e.counts,
                    'percent': e.percent
                })
                y.push(e.type)
            })
            this.echartData.x = x
            this.echartData.y = y
            if (this.companyDistributeBarChart !== '') {
                let objs = {
                    xAxisData: this.echartData.y,
                    seriesData: this.echartData.x
                }
                this.companyDistributeBarChart.clear()
                this.companyDistributeBarChart.setOption(this.$lib.barChart2(objs))
                this.companyDistributeBarChart.resize()
            } else {
                this.initBarChart()
            }
        },
        initBarChart() {
            let objs = {
                xAxisData: this.echartData.y,
                seriesData: this.echartData.x
            }
            this.companyDistributeBarChart = this.$echarts.init(document.getElementById('companyDistributeBar'))
            this.companyDistributeBarChart.setOption(this.$lib.barChart2(objs))
            window.onresize = () => {
                this.companyDistributeBarChart.resize()
            }
        },
        initPieChart() {
            let obj = {
                seriesData: this.pieEchartData.x
            }
            this.companyDistributePieChart = this.$echarts.init(document.getElementById('companyDistributePie'))
            this.companyDistributePieChart.setOption(this.$lib.pieChart(obj, 2))
            window.onresize = () => {
                this.companyDistributePieChart.resize()
            }
        }
    },
    watch: {
        '$store.state.app.year': {
            handler: function (nVal, oVal) {
                this.form.year = nVal
                this.getEnterprisePieCount(this.form)
                this.getEnterpriseBarCount(this.form)
            },
            immediate: true
        }

    }
}
</script>
<style scoped lang="scss">
.model {
    background: url('../../assets/x1/modal_2_header.png') no-repeat top left, url('../../assets/x1/modal_2_footer.png') no-repeat bottom left;
    background-size: 100% auto;
}

#companyDistributePie, .companyDistributeBar {
    width: 100%;
    height: 11vw;
}

.model-title {
    padding: screenVw(1) 0 0;

    h2 {
        text-align: center;
        color: #78dffd;
        font-size: screenVw(1.2);
    }
}

.model-echart {
    cursor: pointer;
    display: flex;
    padding: screenVw(0.5) 0;

    div {
        flex: 1;
    }
}
</style>
